<template>
	<view class="container">
		<uni-nav-bar  left-text="我的" backgroundColor='#c7d5ff'  statusBar :border='false'></uni-nav-bar>
		<view class="top_box">
			<image src="../../static/t.jpg" mode=""></image>
			<span>{{username}}</span>
			<p @click="open">退出登录</p>
		</view>
		<view class="hezi" @click="goPages(index)" v-for="(item,index) in list" :key="index">
			<image :src="item.icon" mode=""></image>
			<span>{{item.name}}</span>
			<uni-icons type="right" size="20"></uni-icons>
		</view>
		<!-- 退出登录确定取消弹出框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog :type="msgType" title="警告" content="确定要退出吗?" :before-close="true" @confirm="dialogConfirm"
				@close="dialogClose" />
		</uni-popup>
		<uv-tabbar :value="1"  class="tab"></uv-tabbar>
		
		<uni-popup ref="dh" type="center">
			<view class="popups">
				<view class="right_icon" @click="closedh()">
					<uni-icons type="closeempty" size="26"></uni-icons>
				</view>
				<view class="conten">
					<view class="ts1">
						{{phoneinfo.title}}
					</view>
					<view class="ts2">
						{{phoneinfo.content}}
					</view>
					<view class="btn" @click="openPhone()">
				       拨打电话
					</view>
					<view class="q" @click="closedh()">
						取消
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		logout,getPhone
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				username:uni.getStorageSync('user').nickName,
				msgType: 'info',
				statusBarHeight:uni.getStorageSync('heights'),
				list:[
					{
						name:'个人信息',
						icon:require('@/static/gr.png')
					},
					{
						name:'联系我们',
						icon:require('@/static/dh.png')
					},
					{
						name:'意见反馈',
						icon:require('@/static/yj.png')
					}
				],
				phoneinfo:{}
			}
		},
		methods: {
			goPages(i){
				if(i == 0){
					uni.navigateTo({
						url: '/pages/index/Information'
					})
				}else if(i == 1){
					getPhone().then(res=>{
						this.phoneinfo = res.rows[0]
						this.$refs.dh.open('center')
						console.log(this.phoneinfo);
					})
				}else{
					uni.navigateTo({
						url: '/pages/indexs/opinion'
					})
				}
			},
			openPhone(){
				uni.makePhoneCall({
					phoneNumber:this.phoneinfo.content
				});
			},
			closedh(){
				this.$refs.dh.close();
			},
			dialogConfirm() {
				console.log('确定退出');
				this.$refs.popup.open();
				this.$refs['popup'].close();
			},
			dialogClose() {
				console.log('取消退出');
				this.$refs.popup.open();
				this.$refs.popup.close();
			},
			open() {
				this.$refs.popup.open()
				logout().then(res=>{
					if(res.code == 200){
						uni.reLaunch({
							url:'/pages/index/login'
						})
						uni.clearStorage()
					}
				})
			},
		},
		mounted() {

		},
		onLoad() {
		}
	}
</script>

<style lang='scss' scoped>
	.hezi {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin-left: 5%;
		border-bottom: 1px #EEEEEE solid;
		height: 100rpx;
		margin-top: 50rpx;

		image {
			width: 42rpx;
			height: 42rpx;
		}

		span {
			margin-left: -60%;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #111111;
		}
	}

	.top_box {
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}

		span {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #111111;
			margin: 20rpx 0rpx;
			margin-bottom: 50rpx;
		}

		p {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 221rpx;
			height: 71rpx;
			background-color: rgba(255, 255, 255, 0);
			border-radius: 35rpx;
			border: 1px solid #909090;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #949494;
		}
	}

	.container {
		/* background: linear-gradient(#CAD8FE, #EDF0FA, #F7F8FB); */
		background-image: linear-gradient(0deg, #f6f6fa 1%, #c7d5ff 70%);
		height: 600rpx;
	}

	.tab {
		image {
			width: 43rpx;
			height: 43rpx;
		}
	}
	.popups{
		width: 620rpx;
		height: 420rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 28rpx;
		box-sizing: border-box;
		.right_icon{
			position: absolute;
			right: 26rpx;
			top: 26rpx;
		}
		.conten{
			padding-top: 60rpx;
			text-align: center;
			.ts1{
				font-size: 36rpx;
				font-weight: bold;
			}
			.ts2{
				margin: 20rpx;
				color: #000;
				font-weight: bold;
			}
			.btn{
				width: 460rpx;
				height: 62rpx;
				background: #065CF7;
				border-radius: 41rpx;
				margin: 40rpx auto;
				line-height: 62rpx;
				text-align: center;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: bold;
			}
			.q{
				width: 460rpx;
				color: #909090;
				font-size: 32rpx;
				text-align: center;
				margin: 0rpx auto;
			}
		}
	}
</style>